<template>
	<view>
		<view v-if="isReady" class="uni-margin-wrap">
			<!--
			    author: 李文昊
			    swiper:uniapp原生轮播图组件， indicator-dots是否显示面板指示点，autoplay是否自动切换，interval自动切换时长，
				duration滑动动画时长
				swiperArray: 轮播图需要的图片，定义在data-return里面
			-->
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="item in swiperArray" :key="item.id">
					<view class="swiper-item">
						<image class="swiper-item-image" :src="item.imgurl" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		syncGetOrder,
		syncPriceInfo,
		myUploadFile,
	} from "../../util/network.js"
	export default {
		data() {
			return {
				swiperArray: [{
						id: 1,
						imgurl: require('@/static/poster1.png')
					},
					{
						id: 2,
						imgurl: require('@/static/poster2.png')
					},
					{
						id: 3,
						imgurl: require('@/static/poster3.png')
					},
					{
						id: 4,
						imgurl: require('@/static/poster4.png')
					}
				],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				homeImgArray:[],
				previewUrl:`${ONLINE_SERVER_ADDRESS_BASE}/file/preview/`,
				isReady:false,
			}
		},
		methods:{
			getHomeBanner(){
				let _this = this
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/banner/list`,
					data:{ 
							type:2,
					},
					method:'GET',
					success: function (res) {
						console.log('启动页banner',res)
						if(res.data.code == 200){
							
							try{
								_this.homeImgArray = res.data.data.bannerList[0].pictureId.split(',')
								_this.swiperArray = []
								_this.homeImgArray.forEach((item,index) => {
									let temp = {
													id: index,
													imgurl: _this.previewUrl + item
									}
									_this.swiperArray.push(temp)
								})
								_this.isReady = true
							}catch(e){
								//TODO handle the exception
							}
						}
					}
				})
			},
		},
		mounted() {
			this.getHomeBanner()
		},
	}
</script>

<style>
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 420rpx;
	}

	.swiper-item {
		display: block;
		height: 420rpx;
		line-height: 420rpx;
		text-align: center;
	}

	.swiper-item-image {
		width: 100%;
		height: 100%;
	}
</style>
